<script setup lang="ts">
  import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
  const rate = useTemplateRef('rateRef');
  onMounted(() => {
    console.log(rate.value);
  });

  const rateValue = ref(0);

  /*
   * @description 父组件传递的props属性
   * */
  const {
    max = 5,
    size = 'default',
    disabled = false,
    allowHalf = true,
    lowThreshold = 2,
    highThreshold = 4,
    colors = ['#f7ba2a', '#f7ba2a', '#f7ba2a'],
  } = defineProps<{
    max?: number;
    size?: 'default' | 'small' | 'large';
    disabled?: boolean;
    allowHalf?: boolean;
    lowThreshold?: number;
    highThreshold?: number;
    voidColor?: string;
    disabledVoidColor?: string;
    colors?: string[] | Record<number, string>;
  }>();

  /*
   * @description 重置当前值
   * */
  const resetCurrentValue = () => {
    nextTick(() => {
      if (rate.value !== null) {
        rate.value.resetCurrentValue();
      }
    });
  };

  /*
   * @description 设置当前值
   * @param {number} value 要设置的值
   * */
  const setCurrentValue = (value: number) => {
    rateValue.value = value;
  };

  defineExpose({
    resetCurrentValue,
    setCurrentValue,
  });
</script>

<template>
  <div>
    <el-rate
      v-model="rateValue"
      ref="rateRef"
      :max="max"
      :size="size"
      :colors="colors"
      :disabled="disabled"
      :allowHalf="allowHalf"
      :low-threshold="lowThreshold"
      :high-threshold="highThreshold"
    ></el-rate>
  </div>
</template>

<style scoped></style>
